<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    ul {
      width: 800px;
      margin: 50px auto;
    }
    li {
      list-style: none;
      height: 50px;
      border: 1px solid red;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .left {
      display: flex;
    }
    img {
      width: 30px;
      height: 30px;
    }
    .share {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul></ul>
  </div>

  <script>
    // fetch是h5新增的一个数据请求的方法

    
    // 如果请求是一个get请求(获取数据)
    // get请求如果要传参数的，就在url后面拼接字符串
    fetch("https://cnodejs.org/api/v1/topics?pageNum=1&pageSize=10")
      .then(response => response.json())
      .then(res => {
        console.log(res);
        if (res.success) {
          let str = ""
          res.data.forEach(item => {
            str += `
              <li>
                <div class="left">
                  <img src="${ item.author.avatar_url }" alt="">
                  <span>${ item.reply_count } / ${ item.visit_count }</span>
                  <span class="share">${ item.tab === "ask" ? "问答" : "分享" }</span>
                  <p>${ item.title }</p>
                </div>
                <div class="right">
                  <p>4个月前</p>
                </div>
              </li>
            `
          })
          document.querySelector("ul").innerHTML = str;
        }
      })
  
  
  
    // post请求(提交数据)
    // post请求需要加第二个参数是一个对象
    // 对象里面需要注明 method: "POST",
    // 如果要进行传参，那么用body写在和method并列的地方
    fetch("https://cnodejs.org/api/v1/topics", {
      method: "POST",
      body: JSON.stringify({pageNum: 1, pageSize: 10})
    }).then(response => response.json())
    .then(res => {
      // ...
    })
  </script>
</body>
</html>